<template>
  <div class="userData">
    <div class="user-box">
      <el-card class="box-card">
        <div class="share-type">
            <div class="share-type-left">
              图片分类：<el-select v-model="curType" placeholder="请选择" @change="typeChange">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="share-type-right">
              <el-button type="info" @click="addType">添加分类</el-button>
            </div>
          </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h3>当前图片分类：{{ curTypeName }}</h3>
          <el-button type="warning" @click="userDialog=true">发布图片</el-button>
        </div>
        <div class="share-body">
          
          <div class="share-top">
            <!-- <i class="el-icon-camera" @click="userDialog=true"></i> -->
            <img :src="user.headImg ? user.headImg : 'https://mall-bucket-2.oss-cn-beijing.aliyuncs.com/72d1e6ee17204eabb4bcfebc2f269c4c.jpg'" alt="">
          </div> 
          <div class="user-color" v-if="imgList.length>0">
            <div class="daity-item" v-for="(item, index) in imgList" :key="index">
              <div class="item-top">
                <img :src="item.imgUrl" alt="">
                <h3>{{item.userName}}</h3>
              </div>
              <div class="item-middle">
                <div class="middle">
                <el-image
                v-if="item.imgUrl"
                style="width: 300px"
                  :src="item.imgUrl"></el-image>
                  <p class="content">{{item.content}}</p>
                </div>
                <div class="time">
                  <span>{{item.createTime}}</span>
                  <span title="当前点赞数"><i class="el-icon-view" style="margin-right:5px;"></i>{{item.clickNum}}</span>
                  <span title="点赞"><i @click="imgZan(item)" :class="[ item.clickNum ? 'el-icon-star-on' : 'el-icon-star-off']"></i></span>
                  <span title="收藏"><i class="el-icon-folder-add" @click="addCollect(item)"></i></span>
                  <i title="删除" class="el-icon-delete" @click="deletePhoto(item)"></i>
                </div>
              </div>
            </div>
          </div>
          <show-no-data v-else></show-no-data>
        </div>
      </el-card>
      <el-dialog title="增加分类" :visible.sync="typeDialog" width="30%">
        <el-input size="small" v-model="typeName" auto-complete="off" placeholder="分类名"></el-input>
        <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" class="title" @click="saveType">保存</el-button>
      </div>
    </el-dialog>
      <el-dialog title="发布图片" :visible.sync="userDialog" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="userData" :rules="rules" ref="userData">
        <el-form-item label="图片" prop="imgUrl">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :on-change="handleChange"
            :auto-upload="false"
            :before-upload="beforeAvatarUpload">
            <img v-if="userData.imgUrl" :src="userData.imgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="图片分类" prop="typeId">
          <el-select v-model="userData.typeId" placeholder="请选择">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" class="title" @click="submitForm">保存</el-button>
      </div>
    </el-dialog>
    </div>
  </div>
</template>
<script>
import ShowNoData from "components/nodata/ShowNoData";
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'Photo',
   data () {
    return {
      curTypeName: '',
      curType: '',
      typeDialog: false,
      typeName: '',
      typeList: [], // 图片分类
      huifuDialog: false,
      commentDialog: false,
      imgList: [],
      userData: {
        userId: '',
        typeId: '',
        imgUrl: ''
      },
      specId: 0, // 图片日志id
      beUser: '', // 被回复的用户名字
      huifucontent: '', //回复内容
      content: '', // 发表评论
      pageQuery: {
        pageNum: 1,
        pageSize: -1
      },
      daityQuery: {
        typeId: '',
        pageNum: 1,
        pageSize: -1
      },
      userDialog: false,
      rules: {
        content: [{ required: true, message: '请输入图片内容', trigger: 'blur' }]
      },
    }
  },
  components: {
    ShowNoData,
  },
  filters: {
    timeFilter (val) {
      return val.match(/.+(?=\.)/g)[0].replace('T', ' ')
    }
  },
  created () {
    this.userData.userName = this.user.nickName
    this.userData.userId = this.user.id
    this.getType()
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    ...mapMutations(['']),
    /**
     * 图片删除
     */
    deletePhoto (item) {
      let params = {
          id: item.id
        }
        this.$api.daity.deletePhoto(params).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            let index = this.imgList.findIndex(item1 => item1.id == item.id)
            this.imgList.splice(index, 1)
          }
        })
    }, 
    /**
     * 点赞
     */
    imgZan (item) {
        let params = {
          id: item.id
        }
        this.$api.daity.goodPhoto(params).then(res => {
          if (res.code === 200) {
            this.$message.success('点赞成功')
            this.imgList.map(item => {
              if (item.id == id) {
                this.$set(item, 'clickNum', 1)
              }
            })
          }
        })
    },
    /**
     * 收藏
     */
    addCollect (item) {
      if (!item.isCollect) {
        let params = {
          userId: this.user.id,
          imgUrl: item.imgUrl,
          img_share_id: item.id
        }
        this.$api.daity.addCollect(params).then(res => {
          if (res.code === 200) {
            this.$message.success('收藏成功')
            this.getDaityList()
          }
        })
      } else {
        this.$message.warning('不要重复收藏喔')
      }
    },
    /**
     * 关闭编辑、增加弹出框
     */
    closeDialog() {
      this.userDialog = false
    },
    
    addType () {
      this.typeDialog = true
    },
    typeChange (e) {
      this.daityQuery.typeId = e
      let tmp = this.typeList.filter(item => {
        if (item.value == e) {
          return item
        }
      })
      this.curTypeName = tmp[0].label
      this.getDaityList()
    },
    /**
     * 添加图片分类
     */
    saveType () {
      let params = {
        typeName: this.typeName
      }
      this.$api.daity.addPhotoType(params).then(res => {
        if (res.code === 200) {
          this.typeDialog = false
          this.typeName = ''
          this.getType()
        }
      })
    },
    /**
     * 获取图片分类列表
     */
    getType() {
      this.$api.daity.photoTypeList(this.pageQuery).then(res => {
        if (res.code === 200) {
          this.typeList = res.data.records.map(item => {
            return {
              label: item.typeName,
              value: item.id
            }
          })
          this.typeChange(this.typeList[0].value)
        }
      })
    },
    /**
     * 获取图片列表
     */
    getDaityList () {
      this.$api.daity.getPhotoList(this.daityQuery).then(res => {
        if (res.code === 200) {
          this.imgList = res.data.records
          console.log(this.imgList);
        }
      })
    },
    /**
     * 发布评论
     */
    publishComment () {
      let params = {
        dailySharingId: this.specId,
        userId: this.user.id,
        userName: this.user.nickName,
        content: this.content
      }
      this.$api.daity.addComment(params).then(res => {
        if (res.code === 200) {
          this.commentDialog = false
          this.getDaityList()
        }
      })
    },
    /**
     * 发布回复
     */
    publishHuifu () {
      let params = {
        dailySharingId: this.specId,
        userId: this.user.id,
        userName: this.user.nickName,
        answerUserName: this.beUser,
        content: this.huifucontent
      }
      this.$api.daity.addComment(params).then(res => {
        if (res.code === 200) {
          this.huifuDialog = false
          this.getDaityList()
        }
      })
    },
    /**
     * 发布回复 dialog
     */
    huifuComment (id, name) {
      this.huifuDialog = true
      this.beUser = name
      this.specId = id
    },
    /**
     * 发布评论 dialog
     */
    publish (id) {
      this.commentDialog = true
      this.specId = id
    },
    /**
     * 提交图片
     */
    submitForm () {
      delete this.userData.userName
        // this.userData.typeId = this.curType
      this.$api.daity.addPhoto(this.userData).then(res => {
        if (res.code === 200) {
          this.userDialog = false
          this.getDaityList()
        }
      })
    },
    handleAvatarSuccess(res, file) {
      this.userData.imgUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    /****
     * 上传图片 起步函数
     */
    handleChange (file) {
      this.submitUpload(file)
    },
    /***
     * 上传图片 上传函数
     */
    submitUpload (file) {
        let formData = new FormData() //  用FormData存放上传文件
        formData.append('file', file.raw, file.raw.name)
        this.$api.auth.uploadImage(formData).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '上传成功!'
            })
            this.userData.imgUrl = res.data
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.userData {
  .user-box{
    width:90%;
    margin:20px auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    .box-card{
      flex: 0 1 65%;
      &:first-child{
        flex: 0 1 30%;
      }
      .share-type{
        margin-bottom: 20px;
        .share-type-left{
        }
        .share-type-right{
          margin-top: 20px;
        }
    }
    }
    .clearfix{
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
    }
    .share-body{
      .share-top{
        width: 100%;
        height: 300px;
        background-size: 100%;
        background-position: center;
        background-image: url('/imgs/share-bg.jpeg');
        background-repeat: no-repeat;
        position: relative;
        i{
          font-size: 50px;
          position: absolute;
          right: 5%;
          top: 20px;
        }
        img{
          width: 80px;
          height: 80px;
          border-radius: 10px;
          position: absolute;
          right: 5%;
          bottom: -35px;
        }
      }
      .user-color{
        height: 600px;
        overflow: auto;
        // color: #ff6600;
        font-size: 18px;
        padding: 10px;
        .daity-item{
          margin-bottom: 30px;
          .item-top{
            img{
              width: 70px;
              height: 70px;
              border-radius: 10px;
              display: inline-block;
              vertical-align: middle;
            }
            h3{
              margin-left: 10px;
              font-size: 20px;
              line-height: 60px;
              color: #409EFF;
              display: inline-block;
              vertical-align: top;
            }
          }
          .item-middle{
            width: 70%;
            margin: 0 auto 20px;
            .middle{
              display: flex;
              flex-flow: row nowrap;
              .content{
                text-indent: 2em;
                padding-top: 10px;
                margin-left: 20px;
                margin-bottom: 10px;
              }
            }
            .time{
              color: #d9d9d9;
              margin-top: 20px;
              display: flex;
              flex-flow: row nowrap;
              align-items: center;
              i {
                color: #d9d9d9;
                cursor: pointer;
                margin-left: 20px;
              }
            }
          }
          .item-bottom{
            width: 70%;
            margin: 0 auto;
            padding: 10px;
            border-radius: 5px;
            background-color: #d9d9d9;
            opacity: .8;
            .item-item{
              line-height: 25px;
              .user{
                color: gray;
                
              }
              &:hover .huifu{
                display: inline-block;
              }
              .huifu{
                display: none;
                margin-left: 10px;
                font-size: 15px;
                cursor: pointer;
              }
            }
          }
          .show-p span{
            font-size: 13px;
            display: none;
            color: gray;
            margin-left: 5px;
            cursor: pointer;
          }
          .show-p:hover span{
            display: inline-block;
          }
        }
      }
    }
  }
  .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.user-color::-webkit-scrollbar {
width:8px;
height:8px;
}
/*滚动条里面小方块样式*/
.user-color::-webkit-scrollbar-thumb {
border-radius:100px;
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
background:gray;
}
/*滚动条里面轨道样式*/
.user-color::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
border-radius:0;
background:rgba(0,0,0,0.1);
}
}
</style>
